<div class="admin">
  <button
    nz-button
    style="margin-bottom: 15px;"
    (click)="goBack()"
  >
    返回主页
  </button>
  <button
    nz-button
    style="margin-left: 15px;"
    (click)="handleSync()"
    [nzLoading]="syncLoading"
  >
    同步到远端
  </button>
  <button
    nz-button
    style="margin-left: 15px;"
    (click)="handleReset()"
  >
    重置初始数据
  </button>

  <div class="content">
    <p><b>1、所有数据设置完毕后点击 “同步到远端”，拖拽表格进行排序</b></p>
    <p><b>2、网站分类需手动维护, <a [href]="gitRepoUrl + '/edit/main/data/tag.json'" target="_blank">点击编辑</a></b></p>
    
    <div class="logo-wrapper">
      <label id="file">
        <img [src]="LOGO_CDN" alt="" class="logo">
        <p style="white-space: nowrap; margin-top: 5px;">
          {{ uploading ? '上传中...' : '更换LOGO, 仅支持 PNG' }}
        </p>
        <input
          type="file"
          name="file"
          (change)="onLogoChange($event)"
          accept="image/png"
        >
      </label>
    </div>

    <div class="book-wrapper">
      <label id="file">
        <img src="assets/img/bookmark.svg" alt="" class="logo">
        <p style="white-space: nowrap; margin-top: 5px;">从Chrome书签导入</p>
        <input
          type="file"
          name="file"
          (change)="onBookChange($event)"
          accept="text/html"
        >
      </label>
    </div>
  </div>

  <nz-tabset *ngIf="isLogin" [nzSelectedIndex]="tabActive" (nzSelectedIndexChange)="onTabChange($event)">
    <nz-tab nzTitle="管理一级分类">
      <button nz-button nzType="primary" (click)="toggleCreateModal()">添加分类</button>
      <nz-table #basicTable [nzData]="websiteList" [nzShowPagination]="false" style="margin-top: 15px;">
        <thead>
          <tr>
            <th>图标</th>
            <th>分类名称</th>
            <th>仅自己可见</th>
            <th>创建时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody cdkDropList (cdkDropListDropped)="dropOne($event)">
          <tr *ngFor="let data of websiteList; let idx = index" cdkDrag>
            <td>
              <app-logo
                [src]="data.icon"
                [name]="data.title"
              >
              </app-logo>
            </td>
            <td>{{ data.title }}</td>
            <td>
              <i *ngIf="data.ownVisible" nz-icon nzType="check" nzTheme="outline"></i>
            </td>
            <td>{{ data.createdAt }}</td>
            <td>
              <a (click)="handleEditBtn(data, idx)">编辑</a>
              <a
                nz-popconfirm
                nzPopconfirmTitle="这会删除分类下的所有数据，您确定要删除吗?"
                nzPopconfirmPlacement="bottom"
                (nzOnConfirm)="handleConfirmDelOne(idx)"
              >
                <a nz-button nzType="link" nzDanger>删除</a>
              </a>
            </td>
          </tr>
        </tbody>
      </nz-table>
    </nz-tab>

    <nz-tab nzTitle="管理二级分类">
      <nz-select
        [ngModel]="oneSelect"
        nzShowSearch
        nzPlaceHolder="请选择一级分类"
        (ngModelChange)="hanldeOneSelect($event)"
        style="width: 260px;"
      >
        <nz-option
          *ngFor="let item of websiteList"
          [nzLabel]="item.title"
          [nzValue]="item.title"
        >
        </nz-option>
      </nz-select>

      <button
        nz-button
        nzType="primary"
        (click)="toggleCreateModal()"
        style="margin-left: 20px;"
      >
        添加分类
      </button>

      <nz-table #basicTable [nzData]="twoTableData" [nzShowPagination]="false" style="margin-top: 15px;">
        <thead>
          <tr>
            <th>图标</th>
            <th>分类名称</th>
            <th>仅自己可见</th>
            <th>创建时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody cdkDropList (cdkDropListDropped)="dropTwo($event)">
          <tr *ngFor="let data of twoTableData; let idx = index" cdkDrag>
            <td>
              <app-logo
                [src]="data.icon"
                [name]="data.title"
              >
              </app-logo>
            </td>
            <td>{{ data.title }}</td>
            <td>
              <i *ngIf="data.ownVisible" nz-icon nzType="check" nzTheme="outline"></i>
            </td>
            <td>{{ data.createdAt }}</td>
            <td>
              <a (click)="handleEditBtn(data, idx)">编辑</a>
              <a
                nz-popconfirm
                nzPopconfirmTitle="这会删除分类下的所有数据，您确定要删除吗?"
                nzPopconfirmPlacement="bottom"
                (nzOnConfirm)="handleConfirmDelTwo(idx)"
              >
                <a nz-button nzType="link" nzDanger>删除</a>
              </a>
            </td>
          </tr>
        </tbody>
      </nz-table>
    </nz-tab>

    <nz-tab nzTitle="管理三级分类">
      <nz-select
        [ngModel]="oneSelect"
        nzShowSearch
        nzPlaceHolder="请选择一级分类"
        (ngModelChange)="hanldeOneSelect($event)"
        style="width: 200px;"
      >
        <nz-option
          *ngFor="let item of websiteList"
          [nzLabel]="item.title"
          [nzValue]="item.title"
        >
        </nz-option>
      </nz-select>

      <nz-select
        [ngModel]="twoSelect"
        nzShowSearch
        nzPlaceHolder="请选择二级分类"
        (ngModelChange)="hanldeTwoSelect($event)"
        style="width: 200px; margin-left: 15px;"
      >
        <nz-option
          *ngFor="let item of twoTableData"
          [nzLabel]="item.title"
          [nzValue]="item.title"
        >
        </nz-option>
      </nz-select>

      <button
        nz-button
        nzType="primary"
        (click)="toggleCreateModal()"
        style="margin-left: 20px;"
      >
        添加分类
      </button>

      <nz-table #basicTable [nzData]="threeTableData" [nzShowPagination]="false" style="margin-top: 15px;">
        <thead>
          <tr>
            <th>图标</th>
            <th>分类名称</th>
            <th>仅自己可见</th>
            <th>创建时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody cdkDropList (cdkDropListDropped)="dropThree($event)">
          <tr *ngFor="let data of threeTableData; let idx = index" cdkDrag>
            <td>
              <app-logo
                [src]="data.icon"
                [name]="data.title"
              >
              </app-logo>
            </td>
            <td>{{ data.title }}</td>
            <td>
              <i *ngIf="data.ownVisible" nz-icon nzType="check" nzTheme="outline"></i>
            </td>
            <td>{{ data.createdAt }}</td>
            <td>
              <a (click)="handleEditBtn(data, idx)">编辑</a>
              <a
                nz-popconfirm
                nzPopconfirmTitle="这会删除分类下的所有数据，您确定要删除吗?"
                nzPopconfirmPlacement="bottom"
                (nzOnConfirm)="handleConfirmDelThree(idx)"
              >
                <a nz-button nzType="link" nzDanger>删除</a>
              </a>
            </td>
          </tr>
        </tbody>
      </nz-table>
    </nz-tab>

    <nz-tab nzTitle="管理网站">
      <nz-select
        [ngModel]="oneSelect"
        nzShowSearch
        nzPlaceHolder="请选择一级分类"
        (ngModelChange)="hanldeOneSelect($event)"
        style="width: 200px;"
      >
        <nz-option
          *ngFor="let item of websiteList"
          [nzLabel]="item.title"
          [nzValue]="item.title"
        >
        </nz-option>
      </nz-select>

      <nz-select
        [ngModel]="twoSelect"
        nzShowSearch
        nzPlaceHolder="请选择二级分类"
        (ngModelChange)="hanldeTwoSelect($event)"
        style="width: 200px; margin-left: 15px;"
      >
        <nz-option
          *ngFor="let item of twoTableData"
          [nzLabel]="item.title"
          [nzValue]="item.title"
        >
        </nz-option>
      </nz-select>

      <nz-select
        [ngModel]="threeSelect"
        nzShowSearch
        nzPlaceHolder="请选择三级分类"
        (ngModelChange)="hanldeThreeSelect($event)"
        style="width: 200px; margin-left: 15px;"
      >
        <nz-option
          *ngFor="let item of threeTableData"
          [nzLabel]="item.title"
          [nzValue]="item.title"
        >
        </nz-option>
      </nz-select>

      <button
        nz-button
        nzType="primary"
        (click)="toggleCreateWebModal()"
        style="margin-left: 20px;"
      >
        添加网站
      </button>

      <nz-table #basicTable [nzData]="websiteTableData" [nzShowPagination]="false" style="margin-top: 15px;">
        <thead>
          <tr>
            <th>图标</th>
            <th>网站名称</th>
            <th>网站分类</th>
            <th>仅自己可见</th>
            <th nzWidth="300px">网站描述</th>
            <th>创建时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody cdkDropList (cdkDropListDropped)="dropWebsite($event)">
          <tr *ngFor="let data of websiteTableData; let idx = index" cdkDrag>
            <td>
              <app-logo
                [src]="data.icon"
                [name]="data.name"
              >
              </app-logo>
            </td>
            <td>
              <a [href]="data.url" target="_blank">{{ data.name }}</a>
            </td>
            <td nzWidth="100px">
              <nz-tag *ngFor="let key of objectKeys(data.urls)" [nzColor]="tagMap[key].color || '#2db7f5'">
                <a [href]="data.urls[key]" target="_blank">{{ key }}</a>
              </nz-tag>
            </td>
            <td>
              <i *ngIf="data.ownVisible" nz-icon nzType="check" nzTheme="outline"></i>
            </td>
            <td>
              <pre class="desc">{{ data.desc }}</pre>
            </td>
            <td nzWidth="200px">{{ data.createdAt }}</td>
            <td nzWidth="100px">
              <a (click)="toggleCreateWebModal(); websiteDetail = data; editIdx = idx">编辑</a>
              <a
                nz-popconfirm
                nzPopconfirmTitle="您确定要删除吗?"
                nzPopconfirmPlacement="bottom"
                (nzOnConfirm)="handleConfirmDelWebsite(idx)"
              >
                <a nz-button nzType="link" nzDanger>删除</a>
              </a>
            </td>
          </tr>
        </tbody>
      </nz-table>
    </nz-tab>
  </nz-tabset>
</div>

<app-create-web
  [visible]="showCreateWebModal"
  (onCancel)="toggleCreateWebModal()"
  (onOk)="onOkCreateWeb($event)"
  [detail]="websiteDetail"
>
</app-create-web>

<nz-modal
  [(nzVisible)]="showCreateModal"
  [nzTitle]="isEdit ? '编辑' : '新增'"
  (nzOnCancel)="toggleCreateModal()"
  (nzOnOk)="handleOk()"
>
  <ng-container *nzModalContent>
    <form nz-form [formGroup]="validateForm">
      <nz-form-item>
        <nz-form-label [nzSpan]="6" nzRequired>分类名称</nz-form-label>
        <nz-form-control [nzSpan]="18" nzErrorTip="请输入名称">
          <input formControlName="title" nz-input placeholder="发现导航" />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="6" nzRequired>仅自己可见</nz-form-label>
        <nz-form-control [nzSpan]="18">
          <nz-switch formControlName="ownVisible"></nz-switch>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="6">图标</nz-form-label>
        <nz-form-control [nzSpan]="18">
          <nz-input-group [nzPrefix]="prefixIcon">
            <input formControlName="icon" nz-input />
          </nz-input-group>

          <ng-template #prefixIcon>
            <app-logo [src]="iconUrl" [size]="25" *ngIf="iconUrl"></app-logo>
          </ng-template>
        </nz-form-control>
      </nz-form-item>
    </form>
  </ng-container>
</nz-modal>
